<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    App 组件中
    <hr>
    <father></father>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>

    // 父组件选项
    const fatherOptions = {
      template: `
        <div class="father">
          <div>这是父组件中的内容</div>
          <div>接收到的数据: {{ receive }}</div>
          <hr />
          <!-- 渲染子组件 -->
          <son @custom="handleCustom"></son>
        </div>
      `,
      data() {
        return {
          message: 'father',
          receive: '',
        }
      },
      methods: {
        handleCustom(data) {
          console.log('接收到数据:', data)
          this.receive = data
        },
      },
    }

    // 子组件选项
    const sonOptions = {
      template: `
        <div class="son">
          <div>这是子组件中的内容</div>
          <input v-model="inputValue" />
          <button @click="handleTransfer">传递到父组件中</button>
        </div>
      `,
      data() {
        return {
          inputValue: '',
        }
      },
      methods: {
        handleTransfer() {
          console.log('传递数据', this.inputValue)
          // 调用组件实例提供的一个固定方法 $emit() 来触发事件，并传递数据
          this.$emit('custom', this.inputValue)
        },
      },
      emits: ['custom'], // 声明可触发事件的名称
    }

    // 根组件
    const app = Vue.createApp({
      data() {
        return {
          message: 'app'
        }
      },
    })

    // 全局注册组件
    app.component('father', fatherOptions)
    app.component('son', sonOptions)

    app.mount('#app')
  </script>
</body>
</html>